<template>
  <div class="wrapper">
    <catalog></catalog>
    <example>
      <template v-slot:title>
        基本用法
      </template>
      <l-select v-model="selectModel1" :options="options" placeholder="选个饭店吃饭吧" width="200px"></l-select>
      <template v-slot:code>
        {{selectExample.example1}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        以label字段作为model值
      </template>
      <p>以label作为model的值：{{selectModel2}}</p>
      <l-select v-model="selectModel2" :options="options" :format="format" placeholder="选个饭店吃饭吧"
                 width="200px"></l-select>
      <p>默认以id作为model的值：{{selectModel5}}</p>
      <l-select v-model="selectModel5" :options="options" placeholder="选个饭店吃饭吧"
                 width="200px"></l-select>
      <template v-slot:code>
        {{selectExample.example2}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        不显示过滤框
      </template>
      <l-select v-model="selectModel3" :options="options" :filter="false" width="200px"></l-select>
      <template v-slot:code>
        {{selectExample.example3}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        change事件
      </template>
      <l-select v-model="selectModel4" :options="options" @change="changeSelect" width="200px"></l-select>
      <template v-slot:code>
        {{selectExample.example4}}
      </template>
    </example>
  </div>
</template>

<script>
import Catalog from '../components/Catalog';
import Example from '../components/Example';
import SelectExample from './Select-Example';

export default {
  name: 'Select',
  components: {
    Catalog,
    Example
  },
  methods: {
    changeSelect (model, option) {
      alert('model值为：' + model);
      alert('选择的选项为：' + JSON.stringify(option));
    }
  },
  data () {
    return {
      selectExample: SelectExample,
      selectModel1: '',
      selectModel2: '',
      selectModel3: '',
      selectModel4: '',
      selectModel5: '',
      options: [{
        id: 1,
        label: '沙县小吃'
      }, {
        id: 2,
        label: '兰州拉面'
      }, {
        id: 3,
        label: '新疆大盘鸡'
      }],
      format: {
        label: 'label',
        value: 'label'
      }
    };
  }
};
</script>
